<template>
  <PageWrapper title="标签页+多级field表单" v-loading="loading">
    <div class="mb-4">
      <a-button @click="handleReset" class="mr-2"> 重置表单 </a-button>
      <a-button @click="handleSetValues" class="mr-2"> 设置默认值 </a-button>
      <a-button @click="handleSubmit" class="mr-2" type="primary"> 提交表单 </a-button>
    </div>
    <CollapseContainer title="标签页+多级field表单">
      <Tabs v-model:activeKey="activeKey">
        <TabPane v-for="item in tabsFormSchema" :key="item.key" v-bind="omit(item, ['Form', 'key'])">
          <BasicForm @register="item.Form[0]" />
        </TabPane>
      </Tabs>
    </CollapseContainer>
  </PageWrapper>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue'
import { Tabs } from 'ant-design-vue'
import { PageWrapper } from '/@/vbenComponents/Page'
import { CollapseContainer } from '/@/vbenComponents/Container'
import { useMessage } from '/@/hooks/web/useMessage'
import { omit } from 'lodash-es'
import { deepMerge } from '/@/utils'
import { BasicForm, FormSchema, useForm, FormProps, UseFormReturnType } from '/@/vbenComponents/Form'

export default defineComponent({
  name: 'TabsFormDemo',
  components: { Tabs, TabPane: Tabs.TabPane, PageWrapper, CollapseContainer, BasicForm },
  setup() {
    type TabsFormType = {
      key: string
      tab: string
      forceRender?: boolean
      Form: UseFormReturnType
    }

    const { createMessage } = useMessage()
    const activeKey = ref('tabs2')
    const loading = ref(false)
    const tabsFormSchema: TabsFormType[] = []

    // 公共属性
    const baseFormConfig: Partial<FormProps> = {
      showActionButtonGroup: false,
      labelWidth: 100,
    }

    // 为每个字段模拟默认值, { tabs1: { field1: '', field2: '' }, tabs2: { field1: '' }, ... }
    const mockDefaultValue: Recordable = {}

    // 模拟5个标签页
    for (let i = 1; i <= 5; ++i) {
      const tabsKey = `tabs${i}`

      // 每个标签页8个字段
      const schemas: FormSchema[] = []
      const row: Recordable = {}

      for (let j = 1; j <= 8; ++j) {
        schemas.push({
          field: `${tabsKey}.field${j}`,
          label: `${tabsKey}-field${j}`,
          component: 'Input',
          colProps: { span: 24 },
        })
        row[`field${j}`] = `field: ${tabsKey}.field${j}, default value`
      }

      mockDefaultValue[tabsKey] = row

      tabsFormSchema.push({
        key: tabsKey,
        tab: tabsKey,
        forceRender: true,
        Form: useForm(Object.assign({ schemas }, baseFormConfig) as FormProps),
      })
    }

    async function handleReset() {
      for (const item of tabsFormSchema) {
        const { resetFields } = item.Form[1]
        await resetFields()
      }
    }

    async function handleSubmit() {
      let lastKey = ''
      loading.value = true
      try {
        const values: Recordable = {}
        for (const item of tabsFormSchema) {
          lastKey = item.key
          const { validate, getFieldsValue } = item.Form[1]
          await validate()
          // 表单已支持多级key
          deepMerge(values, getFieldsValue())
        }

        console.log('submit values: ', values)
        createMessage.success('提交成功！请打开控制台查看')
      } catch (e) {
        // 验证失败或出错，切换到对应标签页
        activeKey.value = lastKey
        console.log(e)
      } finally {
        loading.value = false
      }
    }

    async function handleSetValues() {
      console.log('默认值为: ', mockDefaultValue)
      for (const item of tabsFormSchema) {
        const { setFieldsValue } = item.Form[1]
        await setFieldsValue(mockDefaultValue)
      }
    }
    return {
      omit,
      loading,
      activeKey,
      tabsFormSchema,
      handleReset,
      handleSubmit,
      handleSetValues,
    }
  },
})
</script>

<style scoped></style>
